<template>
  <div class="home">
    <el-container class="Home-content">
      <el-aside style="width: 64px" class="AsideCss">
        <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#368CF3" :collapse="true" @select="menuselectHome">
          <el-menu-item index="1">
            <i class="el-icon-s-home"></i>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-user-solid"></i>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-menu"></i>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-document"></i>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="background-color: #dedede">
        <el-header class="HeaderCss">
          <div>
            <el-breadcrumb>
              <el-breadcrumb-item>首页</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="info" size="mini" @click="loginOut">退出登录</el-button>
          </div>
        </el-header>
        <el-container class="contentCss">
          <el-aside style="width: 200px" class="AsideCss" v-if="isResult != 'Result'">
            <el-menu default-active="1-4-3" class="el-menu-vertical-demo" background-color="#fff" text-color="#415058" active-text-color="#246DF3" @select="menuselect">
              <el-submenu index="1">
                <template slot="title">
                  <span>{{ menuList[HomeNavid].title }}</span>
                </template>
                <el-menu-item :index="item.id" v-for="item in menuList[HomeNavid].list" :key="item.id">{{ item.name }}</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
          <div class="userInfo" v-else>
            <div class="userInfo-tit">
              <i class="el-icon-star-on"></i>
              <span class="name">杨成龙</span>
              <span>(销售顾问)</span>
            </div>
            <div class="userInfo-type">
              <h3>客户类型(一)</h3>
              <p>考试时间（2021-07-31 08:08:08）</p>
            </div>
            <div class="userInfo-items">
              <div>
                <span>考试时长</span>
                <i>19：21</i>
              </div>
              <div>
                <span>考试得分</span>
                <i>{{ (resultdata.totalscore * 100) / 100 || 0 }}</i>
              </div>
            </div>
            <div class="userInfo-items">
              <div>
                <span>考试名次</span>
                <i>20</i>
              </div>
              <div>
                <span>排名</span>
                <i>{{ random(1, 1, 100)[0] }}%</i>
              </div>
            </div>
            <div class="userInfo-history">
              <div class="hsitory-top">
                <i class="el-icon-setting"></i>
              </div>
              <div class="gohistory" @click="GoHome('1')">
                <i class="el-icon-s-home"></i>
                <span>返回首页</span>
              </div>
              <div class="gohistory" @click="GoHome('2')">
                <i class="el-icon-refresh"></i>
                <span>再次考试</span>
              </div>
            </div>
          </div>
          <el-main class="elmain">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
  name: 'Home',
  data() {
    return {
      isResult: '',

      menuList: {
        1: {
          title: '保养电话邀约',
          list: [
            { id: '1-4-1', name: '悦学苑线上学习' },
            { id: '1-4-2', name: 'AI系统文字对练' },
            { id: '1-4-3', name: 'AI系统沟通测试' },
          ],
        },
        2: {
          title: '历史学习与排行榜',
          list: [
            {
              id: '2-4-1',
              name: '历史学习',
            },
            {
              id: '2-4-2',
              name: '排行榜',
            },
          ],
        },
        3: {
          title: '对话配置',
          list: [
            { id: '3-4-1', name: '对话内容配置' },
            { id: '3-4-2', name: '对话场景配置' },
          ],
        },
      },
    };
  },
  methods: {
    // 生成 多少位随机数
    random(len, start, end) {
      var arr = [];
      function creat(start, end) {
        var numlen = end - start;
        return parseInt(Math.random() * numlen + start);
      }
      while (arr.length < len) {
        var num = creat(start, end);
        if (arr.indexOf(num) == -1) {
          arr.push(num);
        }
      }
      return arr;
    },
    loginOut() {
      this.$router.push({
        name: 'Login',
      });
    },
    menuselect(e) {
      this.Checkid({ id: e });
      console.log(this.$route);
      if (this.$route.name == 'About') return;
      this.$router.push({
        name: 'About',
      });
    },

    menuselectHome(e) {
      this.CheckNavid({ id: e });
      if (this.$route.name == 'About') return;
      this.$router.push({
        name: 'About',
      });
    },

    ...mapMutations(['Checkid', 'CheckNavid']),

    GoHome(type) {
      if (type == 1) {
        this.$router.push({ name: 'Home' });
      } else {
        this.$router.push({ name: 'Home' });
      }
    },
  },
  computed: {
    ...mapState(['HomeNavid', 'resultdata']),
  },
  created() {
    this.isResult = this.$route.name;
  },
  watch: {
    $route: function (newVal, oldVal) {
      this.isResult = this.$route.name;
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  min-height: 100%;
}
.AsideCss {
  background-color: #545c64;
  box-sizing: border-box;
  overflow: hidden !important;
  i {
    font-size: 28px !important;
  }
}
.Home-content {
  height: 100%;
}
.el-menu {
  border: none !important;
}
.menu-i i {
  color: aliceblue;
}
.HeaderCss {
  background-color: #fff;
  div {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.contentCss {
  box-sizing: border-box;
  padding: 8px;
  .AsideCss {
    background-color: #fff;
    height: 100%;
  }
}
.elmain {
  background-color: #fff;
  box-sizing: border-box;
  margin-left: 8px;
  overflow-y: scroll;
  height: 100%;
}
.el-main {
  padding: 0 8px !important;
}
.userInfo {
  width: 282px;
  height: 100%;
  background-color: #fff;
  min-width: 282px;
}
.userInfo-tit {
  display: flex;
  height: 58px;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 0 40px;
  color: #545c64;
  border-bottom: 1px solid #c1c1c1;
  i {
    font-size: 24px;
    color: #e2ba6d;
  }
  .name {
    color: #222233;
    font-weight: bold;
  }
  span {
    color: #c1c1c1;
  }
}
.userInfo-type {
  text-align: center;
  padding: 20px 0;
  box-sizing: border-box;
  font-size: 18px;
  border-bottom: 1px solid #c1c1c1;
  p {
    font-size: 14px;
    box-sizing: border-box;
    padding: 15px 0;
    color: #7f7f7f;
  }
}
.userInfo-items {
  display: flex;
  justify-content: space-around;

  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px solid #c1c1c1;

  div {
    flex-direction: column;
    display: flex;
    justify-content: space-around;
    align-items: center;
    span {
      font-weight: bold;
      line-height: 2;
      display: inline-block;
      min-width: 50%;
    }
    i {
      font-style: normal;
      color: #368cf3;
      font-weight: bold;
      line-height: 2;
    }
  }
}
.userInfo-history {
  border-top: 8px solid #dedede;
}
.hsitory-top {
  font-size: 22px;
  color: #368cf3;
  width: 50%;
  text-align: center;
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #368cf3;
}
.gohistory {
  cursor: pointer;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 10px 5px;
  color: #7a7c7d;
  padding: 15px 20px;
  background-color: #e7eff7;
  i {
    font-size: 22px;
    margin-right: 20px;
    color: #2ec3e8;
  }
}
</style>
